<template>
  <div class="about">
    <h1 :class="hiddenClass">This is an about page</h1>
  </div>
</template>
<script>
import {mapState, mapWritableState} from 'pinia'
import useModalStore from '@/stores/modal'
import useUserStore from "@/stores/user";

export default {
  name: 'Auth',
  computed: {
    ...mapState(useModalStore, ['hiddenClass']),
    ...mapWritableState(useModalStore, {
      // 起别名
      modalVisibility: 'isOpen'
    })
  },
  beforeRouteEnter(to, from, next) {
    const store = useUserStore()
    console.log('beforeRouteEnter Guard')
    if (to.meta.requiresAuth && !store.userLoggedIn) {
      next(vm => {
        vm.$router.push({name: 'login'})
      })
    } else {
      next()
    }
  }
}
</script>
